<template>
  <div class="header">
    <div class="one">
      <div class="logo-item">
        <p class="logo-text logo-texttop">prdt</p>
      </div>
      <div class="logo-item">
        <p class="logo-text">在线私人文档</p>
      </div>
    </div>
    <div class="tow">

      <div @click="select('shequ')" class="towone" :class="{ clicked: selected == 'shequ' }">
        <li>公开社区</li>
      </div>
      <div @click="select('wendang')" class="towone" :class="{ clicked: selected == 'wendang' }">
        <li>我的文档</li>
      </div>
      <div @click="select('gongju')" class="towone" :class="{ clicked: selected == 'gongju' }">
        <li>实用工具</li>
      </div>

    </div>
    <div class="three">
      <ul>
        <li>
          <div class="yuan">
            <Icons v-if="themeToggle == '白天'" @click="changezhuti('黑夜')" type="icon-rila" style="font-size: 20px;">
            </Icons>
            <Icons v-if="themeToggle == '黑夜'" @click="changezhuti('白天')" type="icon-rila" style="font-size: 20px;">
            </Icons>
          </div>
        </li>
        <!-- <li>
          <div class="yuan">
            <el-badge :value="12" class="item">
              <Icons type="icon-xiaoxi-zhihui" style="font-size: 20px;"></Icons>
            </el-badge>
          </div>
        </li> -->

      </ul>
    </div>

</div>
  
  <!-- display: grid;
  grid-template-columns: 20% 55% 25%; /* 三列，宽度分别为 30%, 40%, 30% */ -->
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits ,computed,onMounted} from 'vue'
import { Icons } from 'ikicons'
import { useCounterStore } from '@/store/index.js'
const store = useCounterStore()
const selected = ref('shequ')
const themeToggle = ref('白天')
const emit = defineEmits(['updateValue'])
//上面部分界面载入时候加载，下面部分写方法相关的
const select = (type) => {
  selected.value = type
  emit('updateValue', type)
}


const changezhuti = (type) => {
  themeToggle.value = type
  if (type == '黑夜') {
    document.body.classList.add('dark-theme'); // 添加 dark-theme 类
  } else {
    document.body.classList.remove('dark-theme'); // 添加 dark-theme 类
  }
}


</script>

<style>
@import '@/assets/css/header.css';
</style>